<template>
  <div class="bingtu">
    <div class="chart">
      <canvas id="container" height="250" width="187.5"></canvas>
    </div>
  </div>
</template>

<script>
import F2 from '@antv/f2/lib/index-all'
export default {
  components: {},
  data() {
    return {}
  },
  mounted() {
    // this.showChart()
    this.showChart()
  },
  methods: {
    // 图表数据初始化
    showChart() {
      const data = [
        { type: '使用天数', value: 2, city: '空调' },
        { type: '节能功能使用天数', value: 1, city: '空调' }
      ]

      const chart = new F2.Chart({
        id: 'container',
        pixelRatio: window.devicePixelRatio
      })

      // chart.axis(false)
      chart.axis('value', false)
      chart.axis('type', {
        line: null,
        // label: (text, index, total) => {
        //   const cfg = { textAlign: 'center', fontSize: 16, color: '#000000' } // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐

        //   cfg.text = total + '天'
        //   return cfg
        // }
        lable: {
          textAlign: 'center',
          fontSize: 16,
          color: '#000000',
          text: '1'
        }
      })
      chart.source(data)
      chart.legend('type', {
        position: 'top',
        align: 'left',
        itemWidth: 150
      })

      chart
        .interval()
        .position('type*value')
        .color('type*city', function(type) {
          var color = void 0
          if (type === '使用天数') color = '#6FE1B4'
          if (type === '节能功能使用天数') color = '#25CF97'
          if (type === '使用次数') color = '#40D9CC'
          if (type === '节能功能使用次数') color = '#00C0AE'

          return color
        })

      chart.render()
      // 绘制柱状图文本
      const offset = -5
      const canvas = chart.get('canvas')
      const group = canvas.addGroup()
      const shapes = {}
      data.forEach(function(obj) {
        const point = chart.getPosition(obj)
        const text = group.addShape('text', {
          attrs: {
            x: point.x,
            y: point.y + offset,
            text: obj.value + '天',
            textAlign: 'center',
            textBaseline: 'bottom',
            fill: '#808080'
          }
        })

        shapes[obj.year] = text // 缓存该 shape, 便于后续查找
      })
    }
  }
}
</script>

<style></style>
